<script setup>
  import { addAPI } from './api/operate';
  import { ref, reactive } from "vue" 

  // 表单数据
  const dataForm = reactive({
    num1: "",
    num2: ""
  })

  // 结果
  const result = ref("")

  // 相加
  const add = async () => {
    // 校验参数是否为空
    if(!dataForm.num1 && !dataForm.num1) {
      // 为空，提示并返回
      return window.alert("参数不可为空！")
    }
    // 保存结果
    result.value = await (await addAPI(dataForm)).data.result
    // 清空表单
    dataForm.num1 = ""
    dataForm.num2 = ""
  }


</script>

<template>
  <div class="computer-box">
    <span>参数1：</span><input type="number" v-model.trim="dataForm.num1"><br><br>
    <span>参数2：</span><input type="number" v-model.trim="dataForm.num2"><br><br>
    <button @click="add">相加</button><br><br>
    <span>结果：{{ result }}</span>
  </div>
</template>

<style scoped>

</style>